<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增时间轴')"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-timeline-add">
        <input name="mId" type="hidden" th:value="${mId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">标题：</label>
            <div class="col-sm-8">
                <input name="timeTitle" class="form-control" type="text" required maxlength="25">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">摘要：</label>
            <div class="col-sm-8">
                <textarea name="summary" class="form-control" required maxlength="300"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">内容：</label>
            <div class="col-sm-8">
                <input type="hidden" class="form-control" name="content" required>
                <div class="summernote" id="content" required></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea name="remark" class="form-control"></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<script th:inline="javascript">
    var prefix = "/memorial/TimeLineS"
    $("#form-timeline-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var addData = $('#form-timeline-add').serialize();
            $.ajax({
                url: prefix + "/add",
                cache: false,
                data: addData,
                type: 'post',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                success: function (data) {
                    debugger;
                    if (data.code == 0) {
                        $.modal.close();
                        var detailUrl = ctx + "memorial/TimeLineM/detail/"+[[${mId}]];
                        $.modal.openTab("时间轴详情", detailUrl,true);
                    } else {
                        $.modal.msgError(data.msg);
                    }
                },
            });

        }
    }

    $(function () {
        $('.summernote').summernote({
            lang: 'zh-CN',
            dialogsInBody: true,
            height: 300,
            callbacks: {
                onChange: function (contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },
                onImageUpload: function (files) {
                    var obj = this;
                    var data = new FormData();
                    data.append("file", files[0]);
                    $.ajax({
                        type: "post",
                        url: ctx + "common/upload",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function (result) {
                            if (result.code == web_status.SUCCESS) {
                                $('#' + obj.id).summernote('insertImage', result.url);
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function (error) {
                            $.modal.alertWarning("图片上传失败。");
                        }
                    });
                }
            }
        });
    });


</script>
</body>
</html>